<template>
  <div class="course-ppt">
    <div id="imgTooles">
      <ul>
        <li v-for="item in pptImgs " :key="item.id">
          <img :src="config.imgPath+item.photoUrl" :data-original="config.imgPath+item.photoUrl" />
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import Viewer from "viewerjs";
import "viewerjs/dist/viewer.css";
export default {
  data() {
    return {
      coursewareId: this.$route.query.id,
      pptImgs: []
    };
  },
  created() {
    this.getPPT();
  },
  methods: {
    getPPT() {
      let that = this;
      let time = new Date().valueOf();
      that
        .$http({
          url: "/wisdomlearn/courseware/selectCoursewareDetail",
          method: "post",
          headers: {
            accessToken: that.config.token,
            appId: "appid-xinyun-0003",
            userId: JSON.parse(that.tool.getCookie("xinyun-front-userInfo"))
              .userId,
            clientId: "",
            sign: that.tool.sign(
              "/wisdomlearn/courseware/selectCoursewareDetail",
              time
            ),
            timestamp: time
          },
          data: {
            coursewareId: that.coursewareId
          }
        })
        .then(res => {
          if (res && res.retCode == "00000") {
            that.pptImgs = res.data;
            that.$nextTick(() => {
              that.initImageTools();
            });
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    initImageTools() {
      //初始化 viewerjs
      const ViewerDom = document.getElementById("imgTooles");
      const viewer = new Viewer(ViewerDom, {
        url: "data-original"
      });
    }
  }
};
</script>
<style scoped>
.course-ppt {
  height: 560px;
  max-width: 1152px;
  margin: 0 auto;
  background-color: #fff;
  margin-top: 10px;
  overflow: auto;
}
/* .course-ppt::-webkit-scrollbar {
  display: none;
} */
ul {
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
}
ul li {
  width: 265px;
  height: 180px;
  list-style: none;
  border: 2px solid #ccc;
  border-radius: 3px;
  cursor: pointer;
  margin: 0 10px 10px 0;
}
ul li:nth-child(4n) {
  margin-right: 0;
}
ul li img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
</style>